<template>
  <view>
    <!-- 一级分类 -->
    <view
      @click="toggleExpand"
      :class="`wd-sidebar-item ${active ? 'wd-sidebar-item--active' : ''} ${prefix ? 'wd-sidebar-item--prefix' : ''}  ${
        suffix ? 'wd-sidebar-item--suffix' : ''
      } ${disabled ? 'wd-sidebar-item--disabled' : ''} ${customClass}`"
      style="justify-content: left"
    >
      <slot name="icon"></slot>
      <template v-if="!slots.icon && icon">
        <wd-icon custom-class="wd-sidebar-item__icon" :name="icon"></wd-icon>
      </template>
      <wd-badge
        v-bind="customBadgeProps"
        custom-class="wd-sidebar-item__badge"
        :custom-style="style"
      >
        {{ label }}
      </wd-badge>
    </view>

    <!-- 二级分类 -->
    <view
      v-if="
        slots.default &&
        (props.value === sidebar.props.modelValue ||
          props.childIds.includes(sidebar.props.modelValue))
      "
      class="wd-sidebar-item__children"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import wdIcon from 'wot-design-uni/components/wd-icon/wd-icon.vue'
import wdBadge from 'wot-design-uni/components/wd-badge/wd-badge.vue'
import { useParent } from 'wot-design-uni/components/composables/useParent'
import { sidebarItemProps } from './types'
import type { BadgeProps } from 'wot-design-uni/components/wd-badge/types'
import { deepAssign, isDef, isUndefined, omitBy } from 'wot-design-uni/components/common/util'
import { SIDEBAR_KEY } from '../htm-sidebar/types'

const props = defineProps(sidebarItemProps)
const slots = useSlots() // 使用 useSlots 获取插槽内容

const { parent: sidebar } = useParent(SIDEBAR_KEY)
const style = ref<string>('margin-left: -10rpx')

if (slots.default) {
  style.value = 'margin-left: -10rpx'
} else {
  style.value = 'margin-left: 10rpx'
}

// 切换展开/折叠状态
function toggleExpand() {
  if (props.disabled) {
    return
  }
  sidebar && sidebar.setChange(props.value, props.label)
}

const customBadgeProps = computed(() => {
  const badgeProps: Partial<BadgeProps> = deepAssign(
    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
    omitBy(
      {
        max: props.max,
        isDot: props.isDot,
        modelValue: props.badge,
      },
      isUndefined,
    ),
  )
  if (!isDef(badgeProps.max)) {
    badgeProps.max = 99
  }
  return badgeProps
})

// 判断当前项是否 active
const active = computed(() => {
  let isActive: boolean = false

  if (sidebar) {
    // 当前项是否被选中
    if (sidebar.props.modelValue === props.value) {
      isActive = true
    }
    if (
      props.childIds.length > 0 &&
      sidebar.props.modelValue &&
      props.childIds.includes(sidebar.props.modelValue)
    ) {
      isActive = true
    }
  }

  return isActive
})

const prefix = computed(() => {
  let prefix: boolean = false
  if (sidebar) {
    const activeIndex: number = sidebar.children.findIndex((c: any) => {
      return c.value === sidebar.props.modelValue
    })

    const currentIndex: number = sidebar.children.findIndex((c: any) => {
      return c.value === props.value
    })

    if (currentIndex === activeIndex - 1) {
      prefix = true
    }
  }
  return prefix
})

const suffix = computed(() => {
  let suffix: boolean = false
  if (sidebar) {
    const activeIndex: number = sidebar.children.findIndex((c: any) => {
      return c.value === sidebar.props.modelValue
    })

    const currentIndex: number = sidebar.children.findIndex((c: any) => {
      return c.value === props.value
    })

    if (currentIndex === activeIndex + 1) {
      suffix = true
    }
  }
  return suffix
})
</script>

<style lang="scss" scoped>
@import './index';

.wd-sidebar-item__children {
  overflow: hidden;
  border-left: 1px solid #eee;
  transition: height 0.3s ease;
}
</style>
